<template>
    <div class="app-container">
        <!-- 回款单列表 -->
        <div class="receivableSheet">
            <!-- 查询模块 -->
            <el-form :model="form" ref="form" label-width="130px" :inline="true">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="回款单号">
                            <el-input v-model="form.repaymentSn" placeholder="请输入回款单号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="流水单号">
                            <el-input v-model="form.orderSn" placeholder="请输入流水单号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="回款状态">
                            <el-select v-model="form.status" placeholder="请选择">
                                <el-option
                                    :label="item.name"
                                    :value="item.value"
                                    v-for="(item,index) in statusType"
                                    :key="index"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓名">
                            <el-input v-model="form.userName" placeholder="请输入客户姓名"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机号">
                            <el-input v-model="form.userPhone" placeholder="请输入客户手机号"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" v-if="hasPermission('adminRole')">
                        <el-form-item label="医院名称">
                            <el-select v-model="form.hospitalId" placeholder="请选择" filterable>
                                <el-option
                                    :label="item.name"
                                    v-for="(item,index) in hospitalList"
                                    :key="index"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="是否逾期">
                            <el-select v-model="form.isExceed" placeholder="请选择">
                                <el-option
                                    :label="item.name"
                                    :value="item.value"
                                    v-for="(item,index) in overdueList"
                                    :key="index"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="创建时间" width="236">
                            <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="dates"
                                type="daterange"
                                range-separator="-"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :default-time="['00:00:00', '23:59:59']"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" class="alignRight" v-if="hasPermission('adminRole')">
                        <el-form-item>
                            <el-button type="primary" @click="handleSearch">查询</el-button>
                            <el-button type="primary" @click="handleExport">导出</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" class="alignRight" v-else>
                        <el-form-item>
                            <el-button type="primary" @click="handleSearch">查询</el-button>
                            <el-button type="primary" @click="handleExport">导出</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 主页列表 -->
        <div class="listDiv" v-loading="tableLoading">
            <el-table :data="tableData" border style="width: 100%" ref="tableData">
                <el-table-column fixed type="index" label="序号" width="50"></el-table-column>
                <el-table-column prop="hospitalName" label="医院名称"></el-table-column>
                <el-table-column prop="paidRatio" label="回款比率">
                    <template slot-scope="scope">{{scope.row.paidRatio}}%</template>
                </el-table-column>
                <el-table-column prop="repaymentSn" label="回款单号"></el-table-column>
                <el-table-column prop="orderSn" label="流水单号"></el-table-column>
                <el-table-column prop="userName" label="客户姓名"></el-table-column>
                <el-table-column prop="userPhone" label="客户手机号" width="100"></el-table-column>
                <el-table-column prop="consultantName" label="咨询师"></el-table-column>
                <el-table-column prop="totalPrice" label="消费金额"></el-table-column>
                <el-table-column prop="paymentId" label="付款方式">
                    <template slot-scope="scope">{{scope.row.paymentId | paymentType}}</template>
                </el-table-column>
                <el-table-column prop="orderCreatedAt" label="支付时间" width="100"></el-table-column>
                <el-table-column prop="receivableAmount" label="应回款金额"></el-table-column>
                <el-table-column prop="receivedAmount" label="已回款金额"></el-table-column>
                <el-table-column prop="reviewAmount" label="审批中回款金额"></el-table-column>
                <el-table-column prop="surplusReceivableAmount" label="剩余回款金额"></el-table-column>
                <el-table-column prop="status" label="状态">
                    <template slot-scope="scope">{{scope.row.status | statusTypes}}</template>
                </el-table-column>
                <el-table-column prop="isExceed" label="是否逾期">
                    <template slot-scope="scope">{{scope.row.isExceed | isExceedType}}</template>
                </el-table-column>
                <el-table-column prop="exceedDays" label="逾期天数">
                    <template slot-scope="scope">
                        <div>
                            <span v-if="scope.row.isExceed=='1'">{{scope.row.exceedDays}}</span>
                            <span v-else></span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createdAt" label="创建时间" width="100"></el-table-column>
                <el-table-column label="操作" width="50" fixed="right">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="text"
                            @click="toRoutes('receivableListInfo',scope.row.repaymentId)"
                        >详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagesCon">
                <div>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="form.pageNum"
                        :page-sizes="page_sizes"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page_totals"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import receivableList from "@/api/receivableList";
import commonFn from "@/utils/common";
import filters from "@/utils/filters";
export default {
    name: "receivableListIndex",
    data() {
        return {
            tableLoading: true,
            // 时间容器
            dates: null,
            // table列表
            tableData: [],
            // form表单
            form: {
                repaymentSn: "",
                orderSn: "",
                status: "",
                userName: "",
                userPhone: "",
                hospitalId: "",
                isExceed: "",
                beginCreateDate: null,
                endCreateDate: null,
                pageNum: 1,
                pageSize: 10
            },
            // 全局回款状态
            statusType: [],
            // 下拉选
            hospitalList: [],
            // 是否逾期
            overdueList: [
                { name: "全部", value: "" },
                { name: "否", value: "0" },
                { name: "是", value: "1" }
            ],
            page_sizes: [10, 30, 50, 100], //每页显示个数
            page_totals: 60 //总条目数,
        };
    },
    filters: {
        // 状态过滤
        statusTypes(e){
            return filters.statusType(String(e))
        },
        // 是否逾期
        isExceedType(e) {
            switch (e) {
                case "0":
                    return "未逾期";
                case "1":
                    return "已逾期";
                default:
                    return "暂无";
            }
        },
        paymentType(e) {
            switch (e) {
                case "0":
                    return e;
                case "1":
                    return "自费";
                case "2":
                    return "分期";
                default:
                    return "暂无";
            }
        }
    },
    mounted() {
        if(!this.hasPermission('adminRole')){
            this.form.hospitalId = String(this.$store.state.user.hospitalId) 
        }
        this.getList(this.form);
        this.hospitalNameList();
        this.statusType = filters.statusType("listReturn");
    },
    methods: {
        // 按钮权限
        hasPermission(e) {
            return window.helper.hasPermission(e);
        },
        // 获取列表
        getList(e) {
            receivableList
                .getList(e)
                .then(res => {
                    if (!res.data.code) {
                        let resData = res.data.data;
                        this.tableData = resData.list;
                        this.page_totals = resData.count;
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.tableLoading = false;
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.tableLoading = false;
                });
        },
        // 获取医院名称
        hospitalNameList() {
            receivableList
                .hospitalNameList()
                .then(res => {
                    if (!res.data.code) {
                        let resData = res.data.data;
                        let newArr = [];
                        resData.forEach(e => {
                            newArr.push({
                                name: e.name,
                                value: String(e.hospitalId)
                            });
                        });
                        newArr.unshift({
                            name: "全部",
                            value: ""
                        });
                        this.hospitalList = newArr;
                        // console.log(this.hospitalList)
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        // 查询
        handleSearch() {
            this.form.pageNum = 1
            if (this.dates != null) {
                if (this.dates.length > 0) {
                    this.form.beginCreateDate = this.dates[0];
                    this.form.endCreateDate = this.dates[1];
                } else {
                    this.form.beginCreateDate = null;
                    this.form.endCreateDate = null;
                }
            } else {
                this.form.beginCreateDate = null;
                this.form.endCreateDate = null;
            }
            //   console.log(JSON.stringify(this.form))
            this.getList(this.form);
        },
        // 导出
        handleExport() {
            let dates = { ...this.form };
            delete dates.pageNum;
            delete dates.pageSize;
            receivableList
                .newHandleExport(dates)
                .then(res => {
                    // console.log(res);
                    commonFn.downFile("回款单", res);
                })
                .catch(err => {
                    this.errorStatus(err);
                });
        },
        // 每页显示条数
        handleSizeChange(val) {
            this.form.pageSize = val;
            this.getList(this.form);
        },
        // 当前页
        handleCurrentChange(val) {
            this.form.pageNum = val;
            this.getList(this.form);
        },
        // 跳路由
        toRoutes(e, id) {
            let route = { name: e, query: { id: id } };
            this.$router.push(route);
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        }
    }
};
</script>
<style scoped>
/* 表单样式修改 */
.el-range-editor--medium.el-input__inner {
    width: 236px;
}
/* 分页样式 */
.pagesCon {
    margin-top: 20px;
    text-align: right;
}
</style>